<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/register.css">
</head>
<body>
        <form id="myform" action="05success.html" method="get">	
                <div class="roundedCorners">
                    <label class="label">账号</label>
                    <input id="username" name="username" type="text" placeholder="用户名不得使用特殊字符，长度在6-20之间" class="default roundedCorners-textbox" /><br /><br />
                    <label class="label">昵称</label>
                    <input id="nickname" name="nickname" type="text" class="roundedCorners-textbox" /><br /><br />
                    <label class="label">电子邮件</label>
                    <input id="email" name="email" type="text" class="roundedCorners-textbox" /><br /><br />
                    <label class="label">身份证</label>
                    <input id="identity" name="identity" type="text" class="roundedCorners-textbox" /><br /><br />
                    <label class="label">手机号码</label>
                    <input id="phone" name="phone" type="text" class="roundedCorners-textbox" /><br /><br />
                    <label class="label">生日</label>
                    <input id="birthday" name="birthday" type="text" class="roundedCorners-textbox" /><br /><br />
                    <label class="label">密码</label>
                    <input id="password" name="password" type="password" class="roundedCorners-textbox" /><br /><br />	
                    <label class="label">确认密码</label>
                    <input id="confirm_pwd" name="confirm_pwd" type="text" class="roundedCorners-textbox" /><br /><br />	
                        <input type="checkbox" class="checkbox" />
                        <label>10天内免登陆</label>
                        <br/><br/>
                    
                    <input type="submit" id="btnCheck" value="确定" />
                    
                    <input type="reset" value="清空" />
                </div>
            </form>
       

</body>
<script type="text/javascript">
   window.onload = function() {
			
			var btnCheck = document.getElementById('btnCheck');
			btnCheck.onclick = function(e) {
				/*
					如果以下表单有一个不符合，则不允许提交表单
				 */
 
				e = e || window.event;
 
				/*
				验证账号
					* 不能为空，
					* 不能使用特殊字符（数字、字母、下划线、横杠），
					* 必须以字母开头，
					* 长度6-20
				*/
				var username = document.getElementById('username').value;
				if(!/^[a-z][\w\-]{5,19}$/.test(username)) {
					alert('您输入的用户名不合法');
 
					// e.preventDefault();
					// return;
					return false;
				}
 
				//昵称只能输入中文
				var nickname = document.getElementById('nickname').value;
				if(!/^[\u2E80-\u9FFF]+$/.test(nickname)) {
					alert('昵称只能为中文');
					return false;
				}
				/*
					电子邮件
						jinrong.xie@qq.com
						123@qq.com
						邮箱用户名必须3-30个字符
				 */
				var email = document.getElementById('email').value;
				if(!/^[a-z0-9][\w\-\.]{2,29}@[a-z0-9\-]{2,67}(\.[a-z\u2E80-\u9FFF]{2,6})+$/.test(email)) {
					alert('邮箱格式不合法');
					return false;
				}
 
				/*
					身份证
						18/15
						445655 19900707 2165
						445655 19900707 211x
				 */
				var identity = document.getElementById('identity').value;
				if(!/^(\d{17}|\d{14})[\dx]$/.test(identity)) {
					alert('身份证格式不合法');
					return false;
				}
 
				/*
					手机号码
						11位
						158 8888 8888
						1 [34578]
				 */
				var phone = document.getElementById('phone').value;
				if(!/^1[3-9]\d{9}$/.test(phone)) {
					alert('手机号不合法');
					return false;
				}
				/*
					生日 
						1999/05/08
						1999-5-8
						19990508
						1999-05/08	不合法
						199905
						引用分组
							* 正则内：\n
							* 正则外:$n
						分组顺序：以左括号出现的顺序为分组顺序
				 */
 
				var birthday = document.getElementById('birthday').value;
				if(!/^\d{4}([\/\-]?)\d{1,2}\1\d{1,2}$/.test(birthday)) {
					alert('生日格式不合法');
					return false;
				}
				/*
					密码  
						长度6-20 
						不能包含空格
				 */
				var password = document.getElementById('password').value;
				if(!/^\S{6,20}$/.test(password)) {
					alert('密码不能有空格');
					return false;
				}
 
				var confirm_pwd = document.getElementById('confirm_pwd').value;
				if(confirm_pwd != password) {
					alert('两次输入密码不一致');
					return false;
				}
 
			}
			// 根据身份自动写入生日
			document.getElementById('identity').onblur = function() {
				// 445655199007072165
				var res = this.value.match(/\d{6}(\d{8})\d{4}/);
				if(res) {
					res = res[1];
				}
				document.getElementById('birthday').value = res;
			}
		}

</script>
</html>